<template>
	<view>
		<view class="dtbj">
			<uni-cusTitle title='溧水游玩地图' :isIcon='false' color='#000'  :style="'margin-top:'+top/2+'px'"></uni-cusTitle>
			<image src="http://www.qidoer.com/xcx/static/dtbj.png" class="bjt">
				<view class="bjsxs">
					
					<image src="../../static/chwl.png" style="width: 100%; height: 48rpx;float: left;"></image>
				</view>
				<view class="bjsx">
					<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
						:markers="covers" @markertap='markTap'>
					</map>
					
				</view>
				
			</image>
		</view>
		<uni-popup ref="popup" background-color="transparent">
			<view class="xinxlist">
				<view style="margin: 0 auto; width: 196rpx;height: 196rpx;">
					<image src="../../static/bjse.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="nrxs">
					<view class="btitle_a">随遇而安Cafe(石鼓路店)</view>
					<view class="listtxt">
						<view class="namimgs">
							<image src="../../static/fs.png" style="width: 100%;height: 100%; position: absolute;left: 0;" ></image>
							<view style="position: absolute; z-index: 1;left: 20rpx;color: #FFDD57;">4.5分</view>
						</view>
					</view>
					<view class="xindizhi"  @click="daohangTap()">
						<view class="xindizhi_left">石鼓路39-1号103室（近环亚广场）</view>
						<view class="xindizhi_right">
							<image src="../../static/dinwei.png"></image>
							<view style="width: 100%;font-size: 20rpx;margin-left: 20rpx;">{{juli}}/千米</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<Tabbar :current="'1'"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabbar.vue'
	export default {
		data() {
			return {
				staticUrl:this.$base.staticUrl,
				juli:'',
				title: 'Hello',
				latitude: 31.647862652276153,
				longitude: 119.02879052645874,
				isMore: true,
				covers: [{
						id: 1,
						latitude: 31.647862652276153,
						longitude: 119.02479052645874,
						iconPath: '/static/index/icon-map1.png'
					},
					{
						id: 2,
						latitude: 31.647862652276153,
						longitude: 119.02579052645874,
						iconPath: '/static/index/icon-map2.png'
					},
					{
						id: 3,
						latitude: 31.647862652276153,
						longitude: 119.02779052645874,
						iconPath: '/static/index/icon-map3.png'
					},
					{
						id: 4,
						latitude: 31.647862652276153,
						longitude: 119.02679052645874,
						iconPath: '/static/index/icon-map4.png'
					}
				],
              top:'',
			}
		},
		components: {
			Tabbar
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},

		onLoad() {
             let that =this
             uni.getStorage({
             	key: 'top',
             	success: function (res) {
             		that.top = res.data;
             	
             	}
             });
		},
		methods: {
			getDistance: function(lat1, lng1) {
				console.log(lat1, lng1)
				
				var lat2 = this.latitude;
				var lng2 = this.longitude;
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				var distance = s.toFixed(2);
				return distance;
				console.log(distance)
				
			},
			daohangTap() {
				uni.openLocation({
					latitude: this.latitude * 1,
					longitude: this.longitude * 1,
				})
			},
			showMask() {
				this.$refs.popup.open('center')
			},
			hideMask(){
				this.$refs.popup.close()
			},
			markTap(e) {
				console.log(e)
				var a = this.covers[e.detail.markerId]
				console.log(a)
				this.$refs.popup.open('center')
				this.juli = this.getDistance(a.latitude,a.longitude)
			},
		}
	}
</script>

<style>
	.dtbj {
		width: 100%;
		height: 100vh;
		float: left;
	}

	.bjt {
		width: 100%;
		height: 100%;
		float: left;
	}

	.bjsx {
		width: 90%;
		height: 75vh;
		position: absolute;
		top: 150rpx;
		z-index: 9;
		left: 4%;
		border-radius: 30rpx;
		border: 8rpx solid #fff;
	}

	.bjsxs {
		width: 80%;
		height: 100rpx;
		position: absolute;
		bottom: 150rpx;
		z-index: 10;
		left: 10%;
		border-radius: 30rpx;
		
	}
	.xinxlist{
		width: 622rpx;
       
	
	}
	.nrxs{
		width: 622rpx;
		height: 440rpx;
		background: #FFFFFF;
		border-radius: 48rpx;
		border: 4rpx solid #FFDD57;
		position: absolute;
		top: 64rpx;
		z-index: -1;
	}
	.btitle_a{
		width: 100%;
		height: 50rpx;
		margin-top:150rpx;
		text-align: center;
		float: left;
	}
	.listtxt{
		width: 100%;
		height: 50rpx;
		text-align: center;
		float: left;
		margin-top: 20rpx;
	}
	.namimgs{
		width: 138rpx;
		height: 38rpx;
		margin: 0 auto;
		position: relative;
	}
	.xindizhi{
		width: 90%;
		height: 72rpx;
		
		float: left;
		margin-top: 50rpx;
		margin-left: 5%;
	}
	.xindizhi_left{
		width: 70%;
		height: 100%;
		float: left;
		font-size: 28rpx;
	}
	.xindizhi_right{
		width: 20%;
		height: 100%;
		float: left;
		margin-left: 7%;
		border-left: 1rpx solid #ccc;
	}
	.xindizhi_right image{
		width: 48rpx;
		height: 48rpx;
		margin-left: 30rpx;
	}
</style>